<template>
    <div class="businessReport-download-warp">
        <el-button
            type="success"
            icon="el-icon-download"
            @click="downloadshow()"
            size="small"
        >{{$t('m.button.download')}}</el-button>
        <el-dialog
            :title="$t('m.button.download')"
            :visible.sync="dialogTableVisible"
            width="480px"
        >
            <el-form :model="formSubmit" :rules="rules" ref="formSubmit" label-width="80px">
                <div class="title">{{$t('m.label.searchCondition')}}</div>
                <el-form-item prop="businessUnitId" label="BU">
                    <BU
                        :form="ruleForm"
                        formId="businessUnitId"
                        :multiple="true"
                        addSize="mini"
                        @selectAll="getCategory"
                        @selectDel="getCategory"
                        size="medium"
                    ></BU>
                </el-form-item>
                <el-form-item prop="productCategoryId" :label="$t('m.label.productCategory')">
                    <category
                        ref="category"
                        :form="ruleForm"
                        formId="productCategoryId"
                        :multiple="true"
                        @selectAll="getProduct"
                        @selectDel="getProduct"
                        addSize="mini"
                        size="medium"
                    ></category>
                </el-form-item>
                <el-form-item prop="productId" :label="$t('m.label.productModelNumber')">
                    <product
                        ref="product"
                        formId="productId"
                        :multiple="true"
                        :form="ruleForm"
                        addSize="mini"
                        size="medium"
                    ></product>
                </el-form-item>
                <el-form-item prop="countryId" :label="$t('m.label.country')">
                    <country
                        :form="ruleForm"
                        formId="countryId"
                        :multiple="true"
                        addSize="mini"
                        size="medium"
                    ></country>
                </el-form-item>
                <el-form-item prop="date" class="date" :label="$t('m.label.date')">
                    <datePicker
                        :form="ruleForm"
                        formId="date"
                        startTime="startTime"
                        endTime="endTime"
                        format="yyyy 年 MM 月 dd 日"
                        valueformat="timestamp"
                        size="medium"
                    ></datePicker>
                </el-form-item>
                <div class="title">{{$t('m.label.summaryCondition')}}</div>
                <el-form-item prop="type" label-width="15px">
                    <el-checkbox-group v-model="formSubmit.type">
                        <el-checkbox name="type" label="账号汇总">{{$t('m.label.accountSummary')}}</el-checkbox>
                        <el-checkbox name="type" label="产品汇总">{{$t('m.label.productSummary')}}</el-checkbox>
                        <el-checkbox name="type" label="国家汇总">{{$t('m.label.countrySummary')}}</el-checkbox>
                        <el-checkbox name="type" label="日期汇总">{{$t('m.label.dateSummary')}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item class="bottom" label-width="0">
                    <download
                        ref="download"
                        :columns="columns"
                        :allColumns="allColumns"
                        @getDataxlsx="getDataxlsx('formSubmit')"
                        :title="$t('m.excel.businessReport')"
                    ></download>
                    <el-button
                        @click="downloadshow"
                        icon="el-icon-circle-close"
                    >{{$t('m.button.cancel')}}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
const ERR_OK = 200;
import download from "components/xlsx/xlsx.vue";
import {
    BU,
    category,
    product,
    country,
    datePicker
} from "components/searchfor";
export default {
    props: ["formData", "allColumns", "columns"],
    data() {
        return {
            dialogTableVisible: false,
            ruleForm: {},
            formSubmit: {
                startTime: [],
                type: ["账号汇总"]
            },
            rules: {
                type: [
                    {
                        type: "array",
                        required: true,
                        message: this.$t(
                            "m.placeholder.selectSummaryCondition"
                        ),
                        trigger: "change"
                    }
                ],
                startTime: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectDate"),
                        trigger: "change"
                    }
                ]
            }
        };
    },
    methods: {
        getCategory() {
            this.formData.productId = [];
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
        },
        getProduct() {
            this.$refs.product.getProduct();
        },
        downloadshow() {
            this.dialogTableVisible = this.dialogTableVisible ? false : true;
            this.ruleForm = JSON.parse(JSON.stringify(this.formData));
            console.log(this.ruleForm)
        },
        // 提交
        getDataxlsx(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (!this.ruleForm.countryId.length > 0) {
                        this.$refs.download.loadingClose();
                        this.$message.warning(this.$t('m.placeholder.selectCountry'));
                        return;
                    }
                    let data = {
                        byAccount: 0,
                        byCountry: 0,
                        byProduct: 0,
                        byRecordDate: 0
                    };
                    for (let i in this.formSubmit.type) {
                        if (this.formSubmit.type[i] === "账号汇总") {
                            data.byAccount = 1;
                        } else if (this.formSubmit.type[i] === "国家汇总") {
                            data.byCountry = 1;
                        } else if (this.formSubmit.type[i] === "产品汇总") {
                            data.byProduct = 1;
                        } else if (this.formSubmit.type[i] === "日期汇总") {
                            data.byRecordDate = 1;
                        }
                    }
                    var newObj = {
                        ...this.ruleForm,
                        ...data
                    };
                    this.$ajax({
                        method: "post",
                        url:
                            this.GLOBAL.businessReportService +
                            "/businessDownload/downloadByDay",
                        data: newObj
                    }).then(res => {
                        if (res.data.code === ERR_OK) {
                            this.$refs.download.getDataXlsx(res.data.data);
                        } else {
                            this.$refs.download.loadingClose();
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    this.$refs.download.loadingClose();
                }
            });
        }
    },
    components: {
        BU,
        category,
        product,
        country,
        datePicker,
        download
    }
};
</script>

<style lang="stylus" scoped>
.businessReport-download-warp {
    margin-left: 10px;
    display: inline-block;

    .el-form-item {
        margin-bottom: 10px;
    }

    .el-select {
    }

    .date {
    }

    .title {
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 15px;
    }

    .el-range-editor.el-input__inner {
    }
}
</style>
